<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-07-31 17:46:49
 * @LastEditTime: 2019-11-28 15:58:02
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>Hello APP</title>
	<link rel="stylesheet" type="text/css" href="../../css/vant.css">
	</link>
	<link rel="stylesheet" type="text/css" href="../../css/base.css">
	</link>
	<!-- <link rel="stylesheet" type="text/css" href="../../script/elementui/lib/theme-chalk/index.css"></link> -->
	<!-- <link rel="stylesheet" type="text/css" href="../../script/elementui/vue-element-table.css"></link> -->
	<link rel="stylesheet" href="../../css/elementui.css">
	<script type="text/javascript" src="../../script/jquery.js"></script>
	<script type="text/javascript" src="../../script/layer/mobile/layer.js"></script>
	<script type="text/javascript" src="../../script/vue.min.js"></script>
	<script type="text/javascript" src="../../script/vant.min.js"></script>
	<script type="text/javascript" src="../../script/fastclick.js"></script>
	<!-- <script type="text/javascript" src="../../script/elementui/vue-element-bigdata-table.min.js"></script> -->
	<script src="../../script/elementui.js"></script>
	<script type="text/javascript" src="../../script/base.js"></script>
	<script type="text/javascript" src="../../script/JSLINQ.js"></script>
	<style type="text/css">
		body {
			zoom: 0.9;
		}

		.van-search {
			padding: 6px 0;
			border-bottom: 1px solid #ebedf0;
		}

		.van-search__action {
			color: #cd1b21;
			font-size: 13px;
			font-weight: 700;
		}

		.result {
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
		}

		.desc {
			color: #969799;
		}

		.selections {
			padding: 5px;
			overflow: auto;
		}

		.van-tag {
			margin-left: 5px;
		}

		.mainBox {
			display: flex;
		}

		.mainBox .main_left {
			width: 42% !important;
			background-color: #e6e6e6;
			height: 100vh;
			overflow: auto;
		}

		#app>.box .mainBox .content {
			height: 100vh !important;
			width: 58% !important;
		}

		.el-tree {
			min-width: 40%;
		}

		.el-tree-node>.el-tree-node__content {
			/* padding: 10px 0 !important; */
			padding-top: 20px !important;
			padding-bottom: 20px !important;
			/* height: 30px; */
		}

		/* .el-tree-node__children {
			padding: 6px 0;
		} */
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<div class="box">
			<van-nav-bar-main title="筛选" left-arrow @click-left="onClickLeft">
				<div slot="right" v-if="allowClear">
					<span @click="submitRows">确定</span>
					<span @click="clear">清空</span>
				</div>
			</van-nav-bar-main>

			<div class="mainBox" v-if="leftList.treeDataSource !== undefined">
				<div class="main_left">
					<div style="border-right: 1px solid #e6e6e6;">
						<el-tree :data="datas" :expand-on-click-node="false" :default-expanded-keys="treeData"
							:default-expand-all='true' node-key="id" :props="defaultProps"
							@node-click="handleNodeClick"></el-tree>
					</div>
				</div>

				<div class="content flex-box flex-direction-c">
					<div v-if="showSearch">
						<form action="">
							<van-search v-model="filterData[searchKey]" placeholder="请输入搜索关键词" show-action
								@search="getSearchList" v-if="serverSearch">
								<div slot="action" @click="getSearchList">查询</div>
							</van-search>
						</form>
					</div>
					<div class="selections" v-if="chooseType!=1">
						<div style="padding:5px;">
							<el-link type="primary" style="float: right;" @click="chooseAll">全选</el-link>
						</div>
						<van-tag closeable size="large" type="primary" v-for="item in selections"
							@close="closeTag(item)">
							{{ item[displayValue] }}
						</van-tag>
					</div>
					<div class="flex-main result">
						<div v-if="!isPaging">
							<van-cell v-for="row in filterResult" clickable @click="selectRow(row)" v-if="!row.isHide">
								<div>
									<div>{{row.name}}</div>
								</div>
							</van-cell>
						</div>

						<van-list v-model="listLoading" :finished="listFinished" finished-text="没有更多了"
							@load="listOnLoad" immediate-check="false" v-if="isPaging">
							<van-cell v-for="row in filterResult" clickable @click="selectRow(row)">
								<div>
									<div>
										<span>{{row[displayValue]}}</span>
										<!-- <van-checkbox v-else shape="square" v-model="row.checked">{{row[displayValue]}}
									</van-checkbox> -->

									</div>
								</div>
							</van-cell>
						</van-list>
					</div>
				</div>
			</div>


			<div class="content flex-box flex-direction-c">
				<div v-if="showSearch">
					<form action="">
						<van-search v-model="filterData[searchKey]" placeholder="请输入搜索关键词" show-action
							@search="getSearchList" v-if="serverSearch">
							<div slot="action" @click="getSearchList">查询</div>
						</van-search>
					</form>
				</div>
				<div class="selections" v-if="chooseType!=1">
					<div style="padding:5px;">
						<el-link type="primary" style="float: right;" @click="chooseAll">全选</el-link>
					</div>
					<van-tag closeable size="large" type="primary" v-for="item in selections" @close="closeTag(item)">
						{{ item[displayValue] }}
					</van-tag>
				</div>
				<div class="flex-main result">
					<div v-if="!isPaging">
						<van-cell v-for="row in filterResult" clickable @click="selectRow(row)" v-if="!row.isHide">
							<div>
								<div>{{row.name}}</div>
							</div>
						</van-cell>
					</div>

					<van-list v-model="listLoading" :finished="listFinished" finished-text="没有更多了" @load="listOnLoad"
						immediate-check="false" v-if="isPaging">
						<van-cell v-for="row in filterResult" clickable @click="selectRow(row)">
							<div>
								<div>
									<span>{{row[displayValue]}}</span>
									<!-- <van-checkbox v-else shape="square" v-model="row.checked">{{row[displayValue]}}
								</van-checkbox> -->

								</div>
							</div>
						</van-cell>
					</van-list>
				</div>
			</div>


		</div>
	</div>
</body>

<script type="text/javascript">
	var vm;
	apiready = function () {
		//$('.init-full').show();
		vm = new Vue({
			el: '#app',
			data: {
				datas: [],
				treeData: [],
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				showLoading: false,
				listLoading: false,
				listFinished: true,
				leftList: api.pageParam.treeObj,
				filterData: api.pageParam.param,
				allowClear: api.pageParam.allowClear || false,
				showSearch: api.pageParam.showSearch || false,
				serverSearch: api.pageParam.serverSearch || false,
				searchBy: api.pageParam.searchBy || [],
				displayValue: api.pageParam.displayValue || [],
				hiddenValue: api.pageParam.hiddenValue || [],
				searchKey: api.pageParam.searchKey || '',
				isPaging: api.pageParam.isPaging || false,
				sql: api.pageParam.sql || '',
				chooseType: api.pageParam.chooseType || 1,
				filterResult: [],
				localSearchKey: '',
				isFirstLoadingFinished: false,
				selections: [],
				treeQuery: ' 1=1 '
			},
			created: function () {
				this.filterData[this.searchKey] = '';
				this.getSearchList();
				// console.log(JSON.stringify(this.leftList.treeDataSource == undefined));
				if (this.leftList.treeDataSource != undefined) {
					this.getLeftInfo()
				}
				console.log('select')
			},
			methods: {
				getLeftInfo() {
					var that = this
					$.ajax({
						url: APP.serverIP() + "/SQLData/GetDataBySql",
						async: true,
						data: {
							sql: that.leftList.treeDataSource,
							sqlParam: {}
						},
						type: "post",
						dataType: 'json',
						success: function (data) {
							console.log(JSON.stringify(data));
							if (data.status == 200 && data.data) {
								var list = data.data.ds
								list.map(item => {
									return item.label = item.ClassName, item.id = item.ClassID
								})

								var newList = that.tranList(list, 0)
								that.datas = newList
								// console.log(JSON.stringify(newList));

								var secArr = []
								var secArr2 = []
								var secArr3 = []
								newList.forEach(item => {
									that.treeData.push(item.id)
									secArr.push(item.children)
								})
								secArr[0].forEach(item => {
									that.treeData.push(item.id)
									secArr2.push(item.children)
								})
								// secArr2[0].forEach(item => {
								// 	that.treeData.push(item.id)
								// 	secArr3.push(item.children)
								// })
								// console.log(JSON.stringify(that.treeData));

							}
						}
					});

				},
				tranList(list, rootVal) {
					var childItem = [];
					for (var i = 0; i < list.length; i++) {
						var childObj = {}
						if (list[i].UpID === rootVal) {
							childObj = list[i];
							childObj.children = vm.tranList(list, list[i].ClassID);
							childItem.push(childObj);
						}
					}
					return childItem;
				},
				getChildrenColQuery(data, treeColQuery) {
					treeColQuery.push("'" + data[vm.leftList.treeHiddenValue] + "'");
					if (data.children.length > 0) {
						for (var i = 0; i < data.children.length; i++) {
							vm.getChildrenColQuery(data.children[i], treeColQuery);
						}
					}
				},
				handleNodeClick(data) {
					//  console.log(JSON.stringify(data));
					var name = vm.leftList.treeHiddenValue;
					var value = data[vm.leftList.treeHiddenValue]

					var treeColQuery = [];
					treeColQuery.push("'" + data[vm.leftList.treeHiddenValue] + "'");


					if (data.children.length > 0) {
						for (var i = 0; i < data.children.length; i++) {
							vm.getChildrenColQuery(data.children[i], treeColQuery);
						}
					}
					vm.treeQuery = name + ' in ( ' + treeColQuery.join(',') + ' )';
					vm.filterData.pageIndex = 1;
					vm.selections = [];
					vm.getSearchList();
				},
				filterList: function () {
					var that = this;
					for (var i in that.filterResult) {
						var x = 0;
						for (var j in that.searchBy) {
							if (that.filterResult[i][that.searchBy[j]].toUpperCase().indexOf(that.localSearchKey.toUpperCase()) > -1) {
								x = 1;
								this.$set(that.filterResult[i], 'isHide', false);
							}
						}
						if (x == 0) {
							this.$set(that.filterResult[i], 'isHide', true);
						}
					}
				},
				getSearchList: function () {
					var that = this;
					if (that.isPaging) {
						that.filterData.pageIndex = 1;
						that.filterData.pageSize = 30;
					}
					var sql = '';
					if (that.isPaging && that.sql.toLowerCase().indexOf('row_number') < 0) {
						sql = "select top " + that.filterData.pageSize + " * from ( SELECT row_number() over(  order by " + that.hiddenValue + " ) as _rownumber ,* FROM (" + that.sql + ")t where " + that.searchKey + " like '%" + that.filterData[that.searchKey] + "%' and " + that.treeQuery + " ) A where _rownumber > " + ((that.filterData.pageIndex - 1) * that.filterData.pageSize).toString() + ""
					}
					else {
						sql = "select * from (" + that.sql + ") t where " + that.searchKey + " like '%" + that.filterData[that.searchKey] + "%' and " + that.treeQuery + " ";
					}

					var sqlParams = $.extend({
						P_UserID: APP.getUserInfo().UserID,
						P_UserName: APP.getUserInfo().UserName,
						P_UserCode: APP.getUserInfo().UserCode
					}, that.filterData)


					$.ajax({
						url: APP.serverIP() + "/SQLData/GetDataBySql",
						async: true,
						data: {
							sql: sql,
							sqlParam: sqlParams
						},
						type: "post",
						dataType: 'json',
						success: function (data) {
							// console.log(JSON.stringify(data));
							if (data.status == 200) {

								vm.isFirstLoadingFinished = true;
								vm.listLoading = false;
								if (that.isPaging) {
									vm.listFinished = false;
								}
								// if(data.data.ds.length<vm.filterData.pageSize * vm.filterData.pageIndex){
								// 	vm.listFinished = false;
								// }
								// else{
								// 	vm.listFinished = true;
								// }

								vm.listFinished = false;

								vm.filterResult = data.data.ds;
							}
						}
					});
				},
				listOnLoad: function () {
					var that = this;
					if (!that.isFirstLoadingFinished) {
						return;
					}

					that.filterData.pageIndex++;
					var sql = '';
					if (that.isPaging) {
						sql = "select top " + that.filterData.pageSize + " * from ( SELECT row_number() over(  order by " + that.hiddenValue + " ) as _rownumber ,* FROM (" + that.sql + ")t where " + that.searchKey + " like '%" + that.filterData[that.searchKey] + "%' ) A where _rownumber > " + ((that.filterData.pageIndex - 1) * that.filterData.pageSize).toString() + ""
					}
					else {
						sql = "select * from (" + that.sql + ") t where " + that.searchKey + " like '%" + that.filterData[that.searchKey] + "%'";
					}
					// console.log(sql)
					$.ajax({
						url: APP.serverIP() + "/SQLData/GetDataBySql",
						async: true,
						data: {
							sql: sql
						},
						type: "post",
						dataType: 'json',
						success: function (data) {
							if (data.status == 200) {
								that.listLoading = false;
								if (data.data.ds.length == 0) {
									that.listFinished = true;
								}
								that.filterResult = that.filterResult.concat(data.data.ds);
							}
						}
					});


				},
				selectRow: function (row) {
					var that = this;
					if (vm.chooseType == 1) {
						api.sendEvent({
							name: 'selectRow',
							extra: {
								chooseType: vm.chooseType,
								row: row
							}
						});
						api.closeWin();
					}
					else {
						var flag = false;

						var selFilterResult = JSLINQ(vm.selections).where(function (item) {
							return item[vm.displayValue] == row[vm.displayValue]
						}).ToArray();
						if (selFilterResult.length == 0) {
							vm.selections.push(row);
						}
						// console.log(JSON.stringify(vm.selections))
					}
				},
				//全选
				chooseAll() {
					vm.selections = [];
					vm.selections = vm.filterResult;
				},
				clear: function () {
					var that = this;
					api.sendEvent({
						name: 'selectRow',
						extra: {
							row: null
						}
					});
					api.closeWin();
				},
				closeTag(tagItem) {
					vm.selections = JSLINQ(vm.selections).where(function (item) {
						return item[vm.displayValue] != tagItem[vm.displayValue]
					}).ToArray();
					// console.log(vm.selections)



				},
				submitRows() {
					var that = this;
					// var resultRow = [];
					// for (var i = 0; i < vm.filterResult.length; i++) {
					// 	if (vm.filterResult[i].checked) {
					// 		resultRow.push(vm.filterResult[i]);
					// 	}
					// }
					console.log(api.pageParam.chooseType)
					console.log(vm.chooseType)
					if (vm.chooseType == 3) {
						api.sendEvent({
							name: 'selectRow',
							extra: {
								chooseType: vm.chooseType,
								row: vm.selections
							}
						});
						api.closeWin();
					}
				},
				onClickLeft() {
					api.closeWin();
				}
			}
		})
	};
</script>

</html>